<script setup lang="ts">
import { useRouter } from "@tarojs/taro";

import ByIcon from "@/components/ui/ByIcon.vue";
import Page from "@/components/common/Page.vue";
import ViewList from "@/components/common/ViewList.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useFetch from "@/hooks/useFetch";
import ApiMerchant from "@/api/merchant";

import { TMerchantActivityDate } from "@/global";

const { params } = useRouter<{
  // 活动商户id
  id: `${number}`;
}>();

// 获取商户活动销售数据列表
const { loading, data: dateList } = useFetch<TMerchantActivityDate[]>(
  ApiMerchant.getMerchantActivityChargeDateList,
  {
    defaultParams: {
      id: parseInt(params.id),
    },
    afterFetch: (res: any) => res?.list,
  }
);
</script>

<template>
  <Page height="200rpx" hiddenHeaderBg>
    <template #header>
      <view class="flex pb-2 px-6 bg-[#fff8ef]">
        <text class="w-5/12">日期</text>
        <text class="w-4/12 text-center">总销售额</text>
        <text class="w-3/12 text-right">应结销售额</text>
      </view>
    </template>

    <ViewList :loading="loading" :isEmpty="dateList?.length == 0">
      <ContentBox
        hideBgImg
        class="mb-4"
        bgColor="bg-[#BB8554]/20"
        v-for="item in dateList"
        :key="item.date"
      >
        <navigator
          :url="`/packageMerchant/pages/sale/list?id=${params.id}&date=${item.date}`"
          class="flex items-center justify-between p-4 text-sm"
        >
          <view class="w-5/12">{{ item.date }}</view>

          <view
            class="w-4/12 text-center"
            :class="{ 'text-[#ac1717] text-2xl': item.charge_total > 0 }"
            >+{{ item.charge_total / 100 }}</view
          >

          <view class="flex item-center justify-end w-3/12">
            <text
              class="pr-1"
              :class="{ 'text-[#ac1717] text-2xl': item.charge_receipt > 0 }"
              >+{{ item.charge_receipt / 100 }}</text
            >
          </view>
          <ByIcon class="ml-1" name="ArrowRight" :size="22" />
        </navigator>
      </ContentBox>

      <!-- <ByCell
        next
        :label="item.date"
        align="right"
        class="mb-4 px-2 py-3 bg-[#BB8554]/20 rounded-lg"
        @tap="
          handleNavigate(
            '/packageMerchant/pages/sale/list?id=' +
              params.id +
              '&date=' +
              item.date
          )
        "
        v-for="item in dateList"
      >
        <text class="mt-2 text-2xl text-[#ac1717]">{{
          "+" + item.charge_receipt / 100
        }}</text>
      </ByCell> -->
    </ViewList>
  </Page>
</template>
